<template>
  <el-card>
    <el-form inline>
      <el-form-item label="隐患排查点">
        <el-input placeholder="请输入查询内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="防洪排查" prop="investigation"></el-table-column>
      <el-table-column label="智能决策" prop="decision"></el-table-column>
      <el-table-column label="上传" align="center">
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.isLeaf"
            type="primary"
            plain
            size="medium"
            class="long-btn"
            >异常</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="处理结果" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.isLeaf && !scope.row.process"
            type="danger"
            size="medium"
            class="long-btn"
            @click="scope.row.status = true"
            >未处理</el-button
          >
          <el-button
            v-if="scope.row.isLeaf && scope.row.process"
            type="success"
            size="medium"
            class="long-btn"
            >已处理</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="经办人" prop="manager"></el-table-column>
      <el-table-column label="审核人" prop="reviewer"></el-table-column>
      <el-table-column label="备注" prop="note"></el-table-column>
    </el-table>
  </el-card>
</template>
<script>
export default {
  name: "InvestigationBody",
  data() {
    return {
      tableData: [
        {
          id: 1,
          investigation: "防排洪",
          isLeaf: false,
          children: [
            {
              id: 11,
              investigation: "防排洪设施淤堵",
              decision: "及时清理防排洪设施淤堵物",
              process: true,
              isLeaf: true,
              manager: "张三三",
              reviewer: "里斯",
              note: "交接班",
            },
            {
              id: 12,
              investigation: "防排洪设施形变、位移、损毁及磨蚀",
              decision:
                "定期检查防排洪设施，发现变形、位移、损毁及磨蚀现象及时汇报处理",
              process: true,
              isLeaf: true,
              manager: "张三三",
              reviewer: "里斯",
              note: "交接班",
            },
            {
              id: 13,
              investigation:
                "库内水位和干滩长度接近设计允许最小值时，未及时上报",
              decision:
                "库内水位和干滩长度接近设计允许最小值时，应及时上报，通过拆除斜槽盖板、排水井拱板或孔塞等措，降低库内水位，增加干滩长度",
              process: false,
              isLeaf: true,
              manager: "张三三",
              reviewer: "里斯",
              note: "交接班",
            },
            {
              id: 14,
              investigation:
                "汛后未对防排洪设施进行全面的检查清理或修复，并未采取措施恢复库内正常水位，存在连续暴雨后水位骤升的风险",
              decision:
                "汛后须对防排洪设施进行全面的检查清理或修复，并严格按设计要求控制库内水位",
              process: true,
              isLeaf: true,
              manager: "张三三",
              reviewer: "里斯",
              note: "交接班",
            },
          ],
        },
        {
          id: 2,
          investigation: "库内水位",
          isLeaf: false,
          children: [
            {
              id: 21,
              investigation:
                "未按设计要求拆卸排水斜槽盖板或排水并拱板，造成库内水位超高",
              decision: "严格按设计要求控制库内水位",
              process: true,
              isLeaf: true,
              manager: "张三三",
              reviewer: "里斯",
              note: "交接班",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style scoped>
.long-btn {
  width: 150px;
}
.el-card{
    height: 80vh;
    margin: -15px;
    border: 0;
}
</style>